<template>
  <div>
    <breadcrumb :navdata="bdname"></breadcrumb>
    <div class="courseList" v-if="result">
      <courseList  :courseItem="item" :from="from" v-for="(item,index) in courseList" :key="index"></courseList>
    </div>
    <div class="noResult" v-else>
      <img src="../../images/xiajiazhuangtai.png" width="108px" height="142px"/>
      <p>当前城市暂无相关套餐信息，我们正在努力上架...</p>
    </div>
  </div>
</template>

<script>
  import {
    courselistByCategory
  } from 'api/getData'
  import {
    mapGetters
  } from 'vuex'

  import breadcrumb from "basic/breadcrumb/breadcrumb"
  import courseList from "basic/courselist/index"
  export default {
    name: "result-course",
    components: {
      breadcrumb,
      courseList
    },
    data() {
      return {
        bdname: [],
        courseList: '',
        from: '3',
        result:true
      }
    },
    computed: {
      ...mapGetters([
        'cityId',
        'resultCourse'
      ])
    },
    mounted: function () {
      this.getData()
    },
    methods: {
      getData() {
        let key = this.$route.query.searchKey
        this.courseList = this.resultCourse
        if(this.courseList.length == 0){
          this.result = false
          this.bdname=[]   //nav显示空
            // this.bdname=[{name: '首页',url: '/'}, {name: '全部套餐',url: '/allCourse'}]
        }else {
          this.result = true
          this.bdname = [{
          name: '关于“'+key+'”共找到'+this.courseList.length+'个结果'
        }]
        }
      }
    },
    watch: {
      resultCourse() {
        this.getData();
      }
    }
  }

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import '~style/base.styl';

  .courseList {
    @extend .sWidth;
    margin-top: 20px;
    margin-bottom: 100px;
  }
  .noResult
    text-align center
    margin-top 10px
    p
      color $color-person-text
      margin-top 40px
      font-size $font-size-medium-x
    @extend .sWidth
    i
      font-size 181px
    @media (min-width: 1920px)
      margin-top 56px
</style>
